<template>
	<div class="content disFlex vertical shadow">
		<div class="top-title">
			选择发现页面版本
		</div>
		<div class="middle-content">
			<div class="discover-wrapper disFlex Flex-middle">
				<div class="discover-item">
					<p class="discover-title">普通版</p>
					<div class="discover-img" :class="discoverType==1?'selected':''" @click="discoverType=1">
						<img src="https://open.banchengyun.com/Public/image/faxian.jpg">
						<div class="icon-wrapper disFlex vertical Flex-middle">
							<img src="https://open.banchengyun.com/Public/image/gou1.png">
							<span>已选</span>
						</div>
					</div>
				</div>

				<div class="discover-item">
					<p class="discover-title">发现版</p>
					<div class="discover-img" :class="discoverType==2?'selected':''" @click="discoverType=2">
						<img src="https://open.banchengyun.com/Public/image/changxian.jpg">
						<div class="icon-wrapper disFlex vertical Flex-middle">
							<img src="https://open.banchengyun.com/Public/image/gou1.png">
							<span>已选</span>
						</div>
					</div>
				</div>

				<div class="discover-item">
					<p class="discover-title">9.9版</p>
					<div class="discover-img" :class="discoverType==3?'selected':''" @click="discoverType=3">
						<img src="https://www.banchengyun.com/public/image/nine.jpg">
						<div class="icon-wrapper disFlex vertical Flex-middle">
							<img src="https://open.banchengyun.com/Public/image/gou1.png">
							<span>已选</span>
						</div>
					</div>
				</div>
				
			</div>

			<p class="bottom-tips">
				<template v-if="discoverType==1">普通版:在商品详情-运营设定-推荐到发现页，并配上大图。商品出现顺序按产品上架时间变化</template>
				<template v-else-if="discoverType==2">发现版:在商品详情-运营设定-推荐到发现页 里设置推荐到发现页即可</template>
			</p>

			<Form v-if="discoverType==3" ref="formValidate" :model="formValidate" :label-width="120" label-position="left"  class="form-wrapper">
		        <FormItem label="页面名称" prop="title">
		            <Input v-model="formValidate.data.title" placeholder="请输入页面名称" style="width: 200px"></Input>
		        </FormItem>
		     
		        <FormItem label="banner图" prop="banner">
	        		<div class="upload-operate-wrapper">
	        			<Button class="upload-img-btn" ghost type="primary">
		        			上传图片
		        			<input name="banner" type="file" accept="image/*" @change='handleFileChange'></input>
		        		</Button>
		        		<span>建议：宽度750,高度442</span>
	        		</div>
					<img class="banner-img" v-if="formValidate.data.banner!=''" :src="formValidate.data.banner"/>
		        </FormItem>

		        <FormItem label="浏览总人数" prop="avatar">
		            <Input v-model="formValidate.data.avatar"  placeholder="请输入浏览总人数" style="width: 200px"></Input>
		        </FormItem>
		        
		        <FormItem label="人均省下金额" prop="price">
		            <Input v-model="formValidate.data.price" placeholder="请输入人均省下金额" style="width: 200px"></Input>
		        </FormItem>

		        <FormItem label="关注二维码" prop="qrimage">
	        		<div class="upload-operate-wrapper">
	        			<Button class="upload-img-btn" ghost type="primary">
		        			上传图片
		        			<input name="qrimage" type="file" accept="image/*" @change='handleFileChange'></input>
		        		</Button>
		        		<span>建议图片格式为112*22格式</span>
	        		</div>
					<img class="qrcode-img" v-if="formValidate.data.qrimage!=''" :src="formValidate.data.qrimage"/>
		        </FormItem>

		        <FormItem label="选择特价商品" prop="goodsList">
		            <Input v-model="goodsIdStr" placeholder="请输入人均省下金额" style="width: 200px" @click.native="showGoodsChoose"></Input>
		        </FormItem>

		        <FormItem label="配置转发标题" prop="shareTitle">
		            <Input v-model="formValidate.share.title" placeholder="配置转发标题" style="width: 200px"></Input>
		        </FormItem>

		        <FormItem label="配置转发图片" prop="shareImage">
		        	<div class="upload-operate-wrapper">
	        			<Button class="upload-img-btn" ghost type="primary">
		        			上传图片
		        			<input name="shareImg" type="file" accept="image/*" @change='handleFileChange'></input>
		        		</Button>
		        		<span>建议：宽度630,高度504</span>
	        		</div>
					<img class="share-img" v-if="formValidate.share.imageUrl!=''" :src="formValidate.share.imageUrl"/>
		        </FormItem>

		    </Form>
		

		</div>
		<div class="btn-bottom-wrapper">
			<Button type="primary" @click="update">更新</Button>
		</div>

		<!-- 商品选择器 -->
     	<goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="0" ref="goodsModal" :goodsIdStr="goodsIdStr"></goodsSelect>
	</div>
</template>

<script>

import { getDiscoverData,updateDiscoverData } from "api/shopDecoration"
import { uploadImage } from 'api/uploadImage'
// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'

export default {
    data () {
        return {
        	discoverType: 1, // 选中版本 1 普通版 2 发现版  3 9.9版
        	formValidate: null, // 9.9表单数据
        	discoverData: null
        }
    },
    methods: {
   		getData() {
   			getDiscoverData().then(_res=>{
   				this.discoverType = _res.data.data.appConfigInfo.page_discover_type;
   				this.formValidate = JSON.parse(_res.data.data.Special.json);
   				this.discoverData = _res.data.data;
   			}).catch(err=>{
   				this.$Message.error(err.message);
   			})
   		},
   		handleFileChange (event) {
			var that = this;
			uploadImage(event.target.files[0]).then(imgUrl => {
				if (event.target.name=='banner') {
					that.formValidate.data.banner = imgUrl;
				} else if (event.target.name=='qrimage') {
					that.formValidate.data.qrimage = imgUrl;
				} else if (event.target.name=='shareImg') {
					that.formValidate.share.imageUrl = imgUrl;
				}
		    }).catch(err => {
		        that.$Message.error(err);  
		    })  
		},
		showGoodsChoose() {
        	this.$refs.goodsModal.show();
		},
		// 选中商品回调
	    commitGoodsFn(_id){
	        this.formValidate.data.goodsList = _id.split(",");
	    },
	    update() {
	    	if (this.discoverType==3 && this.formValidate.data.goodsList == "") {
		        this.$Message.error('特价商品不能为空');  
		        return;
	    	}
	    	var params = {};
	    	params.config_mall_id = this.discoverData.appConfigInfo.config_mall_id;
	    	params.page_discover_type = this.discoverType;
	    	params.label_id = this.discoverData.Special.label_id;
	    	params.main_json = this.formValidate;
	    	updateDiscoverData(params).then(_res=>{
	    		this.$Message.success("更新成功");
	    	}).catch(err=>{
	    		this.$Message.error(error.message);
	    	})
	    }
    },
    created() {
    	this.getData();
    },
    computed: {
    	goodsIdStr: function () {
    		if (this.formValidate == null) {
    			return "";
    		} else {
    			var goods = "";
    			for (var i = 0; i < this.formValidate.data.goodsList.length; i++) {
    				goods += this.formValidate.data.goodsList[i];
    				if (i<(this.formValidate.data.goodsList.length-1)) {
    					goods += ",";
    				}
    			}
    			return goods;
    		}
    	}
    },
    components: {
    	goodsSelect
	}
 }
</script>

<style scoped>
.content {
	margin: 24px 24px 0 24px;
	background: white; 
	height: calc(100vh - 108px);
}	
.top-title {
	font-size: 14px;
    line-height: 16px;
    font-weight: bolder;
    padding: 16px 20px;
    color: #262626;
    border-bottom: 1px solid #e7eaec;
}
.middle-content {
	flex: 1;
	overflow-y: auto;
}
.discover-wrapper {
	display: flex;
}
.discover-item {
	padding: 16px 20px;
}
.discover-img {
	padding: 12px 0;
    line-height: 16px;
    width: 260px;
    height: 444px;
    background: white;
    padding: 10px;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    border: 1px dashed transparent;
    margin-right: 15px;
    margin-top: 15px;
}
.discover-img.selected {
    border: 1px dashed #1676eb;
}
.discover-img img {
	width: 100%;
	height: 100%;
}

.discover-title {
	font-size: 14px;
	text-align: center;
}
.icon-wrapper {
	position: absolute;
    top: -35px;
    right: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #1676eb;
    color: white;
    font-size: 12px;
    text-align: center;
    opacity: 0;
    align-item: center;
    justify-content: center;
    padding-top: 30px;
}

.discover-img.selected .icon-wrapper {
    opacity: 1;
}

.icon-wrapper  img {
    width: 35.2px;
    height: 25.6px;
    position: relative;
    left: -10px;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
}
.icon-wrapper span {
	position: relative;	
	left: -10px;
}

.bottom-tips {
	padding: 16px;
	font-size: 14px;
}

.btn-bottom-wrapper {
	padding: 10px;
	height: 60px;
	display: flex;
	align-item: center;
    justify-content: center;
    border-top: 1px solid #f2f2f2;
}

/* 9.9版本表单样式 */
.form-wrapper {
	padding: 0 20px;
}
.upload-operate-wrapper {
	display: flex;
}
.upload-operate-wrapper span {
	color: darkgray;
	margin-left: 6px;
}
.upload-img-btn {
	position: relative;
}
.upload-img-btn input {
	position: absolute;
	opacity: 0;
	left: 0;top: 0;width: 100%;height: 100%;
}
.banner-img {
	width: 160px;
	height: 90px;
	margin-top: 10px;
	border: 1px solid #F2F2F2;
}
.qrcode-img,.share-img {
	width: 160px;
	height: 160px;
	margin-top: 10px;
	border: 1px solid #F2F2F2;
}

</style>
